<script setup lang="ts">
import { meetingStore } from "@/stores/frontData/he/main";

const store = meetingStore();
</script>
<!--账号与安全-->
<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>
          <h3 class="Title">账户与安全</h3>
        </el-header>
        <el-main class="main">
          <div class="box">
            <span class="wz">密 码</span>
            <div class="box1">
              <span class="wz1">查看密码</span>
              <button class="btn">设置密码</button>
            </div>
          </div>
          <el-divider />
          <div class="box">
            <span class="wz">手机号</span>
            <div class="box1">
              <span class="wz1"
                >{{ store.student.phone.slice(0, 3) }}****{{
                  store.student.phone.slice(-4)
                }}</span
              >
              <button class="btn">修改手机</button>
            </div>
          </div>
          <el-divider />
          <div class="box">
            <span class="wz">三方账号</span>
            <div class="box1">
              <span class="wz1">微信</span>
              <button class="btn">绑定</button>
              <button class="btn">解绑</button>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
.box {
  height: 30px;
  margin-top: 10px;
}
.wz {
  float: left;
}
.box1 {
  float: right;
}
.btn {
  color: #23b8ff;
  border: none;
  background-color: white;
  margin-left: 20px;
  font-size: 16px;
}
.Title {
  color: #23b8ff;
  font-weight: bold;
}
</style>
